<template>
  <div class="app-container">
    <el-card class="card">
      <div slot="header">
        <p>基本信息</p>
        <el-form ref="databaseForm" :model="databaseForm" label-width="80px">
          <el-form-item label="名称">
            <el-input v-model="databaseForm.name" />
          </el-form-item>
          <el-form-item label="数据库">
            <el-select v-model="databaseForm.data_base">
              <el-option v-for="item in dbList" :key="item.index" :label="item.value" :value="item.index" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- sql脚本参数列表-->
    <el-card class="card">
      <div slot="header">
        <p>参数</p>
      </div>
      <el-button class="addButton" type="primary" icon="el-icon-plus" size="small" @click="addParams" />
      <el-table :data="paramsList" border>
        <el-table-column label="参数名" prop="name">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" />
          </template>
        </el-table-column>
        <el-table-column label="参数说明" prop="description">
          <template slot-scope="scope">
            <el-input v-model="scope.row.description" />
          </template>
        </el-table-column>
        <el-table-column label="参数值" prop="value">
          <template slot-scope="scope">
            <el-input v-model="scope.row.value" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- sql脚本 -->
    <el-card class="card">
      <div slot="header">
        <p>sql</p>
      </div>
      <monaco-editor
        height="600"
        language="sql"
        :code="code"
        @mounted="OnMounted"
        @codeChange="onCodeChange"
      ></monaco-editor>
    </el-card>
    <!-- 返回参数列表 -->
    <el-card class="card">
      <div slot="header">
        <p>返回参数</p>
      </div>
      <el-button class="addButton" type="primary" icon="el-icon-plus" size="small" @click="addReturnValues" />
      <el-table :data="returnList" border>
        <el-table-column label="参数名" prop="name">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" />
          </template>
        </el-table-column>
        <el-table-column label="参数说明" prop="description">
          <template slot-scope="scope">
            <el-input v-model="scope.row.description" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogFormVisible=false">取消</el-button>
      <el-button size="small" type="primary" @click="isEdit?updateData():createData()">确定</el-button>
    </span>
  </div>
</template>

<script>
import { getDataBase, createDataBase, updateDataBase } from '@/api/dataBase'
import MonacoEditor from 'vue-monaco-editor'
export default {
  name: 'DataBaseDetail',
  components: { MonacoEditor },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      databaseForm: {
        id: undefined,
        name: '',
        data_base: '192.168.1.1',
        params: '',
        sql: '',
        return_values: ''
      },
      language: 'sql',
      code: '',
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      dbList: [
        {
          index: 'testDb',
          value: '192.168.1.1'
        }
      ],
      paramsList: [],
      returnList: []
    }
  },
  created() {
    if (this.isEdit) {
      const dataBaseId = this.$route.params && this.$route.params.id
      this.fetchData(dataBaseId)
    }
  },
  methods: {
    fetchData(dataBaseId) {
      getDataBase(dataBaseId).then(response => {
        this.databaseForm = Object.assign({}, response.data)
        if (this.databaseForm.params) {
          this.paramsList = JSON.parse(this.databaseForm.params)
        }
        if (this.databaseForm.return_values) {
          this.returnList = JSON.parse(this.databaseForm.return_values)
        }
        this.code = this.databaseForm.sql
      })
    },
    addParams() {
      const paramsItem = {
        name: '',
        description: '',
        value: ''
      }
      this.paramsList.push(paramsItem)
    },
    addReturnValues() {
      const return_valuesItem = {
        name: '',
        description: ''
      }
      this.returnList.push(return_valuesItem)
    },
    collectDatabaseForm() {
      this.databaseForm.sql = this.code
      this.databaseForm.params = JSON.stringify(this.paramsList)
      this.databaseForm.return_values = JSON.stringify(this.returnList)
    },
    createData() {
      this.collectDatabaseForm()
      this.$refs.databaseForm.validate(valid => {
        if (valid) {
          createDataBase(this.databaseForm).then(() => {
            this.$router.go(-1)
            this.$notify({
              type: 'success',
              message: '保存成功'
            })
          })
        }
      })
    },
    updateData() {
      this.collectDatabaseForm()
      this.$refs.databaseForm.validate(valid => {
        if (valid) {
          updateDataBase(this.databaseForm.id, this.databaseForm).then(() => {
            this.$router.go(-1)
            this.$notify({
              type: 'success',
              title: '提示信息',
              message: '保存成功'
            })
          })
        } else {
          this.$message.error(valid.errorDetails)
        }
      })
    },
    OnMounted(editor) {
      this.editor = editor
    },
    onCodeChange(editor) {
      this.code = editor.getValue()
    }
  }
}
</script>

<style scoped>
.addButton {
  margin-bottom: 15px;
}
</style>
